
<template>
  <keep-alive>
    <div class="MatchHome">
      <el-form ref="form" :model="form" label-width="80px" class="form">
        <div class="keyword">
          <el-form-item label="赛事名称">
            <el-input
              v-model="form.name"
              @keyup.enter.native="onEnterSubmit"
              placeholder="请输入赛事名称"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <div class="state">
          <el-form-item label="状态">
            <el-select
              v-model="form.type"
              @change="onSearch"
              placeholder="状态"
            >
              <el-option label="全部" value></el-option>
              <el-option label="未发布" value="1,0"></el-option>
              <el-option label="已发布" value="2"></el-option>
              <el-option label="比赛准备中" value="3"></el-option>
              <el-option label="比赛进行中" value="4"></el-option>
              <el-option label="比赛已结束" value="5"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <transition name="el-zoom-in-center">
        <el-table
          v-loading="loading"
          :data="MatchShowList"
          class="MatchTable"
          stripe
          :default-sort="{ prop: 'ID', order: 'descending' }"
        >
          <el-table-column
            label="ID"
            prop="id"
            width="60"
            sortable
            fixed
          ></el-table-column>
          <el-table-column label="机构" fixed width="120">
            <template slot-scope="scope">
              <span>{{ scope.row | clubRef("club") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="赛事名称" prop="match" fixed width="340">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="裁判长" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row | clubRef("ref") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="比赛时间"
            prop="start_time"
            sortable
            width="180"
          ></el-table-column>
          <!-- 排序 -->
          <el-table-column
            label="排序"
            prop="order"
            sortable
            width="80"
            v-if="userType == 5"
          >
            <template slot-scope="scope">
              <div>
                <el-input
                  v-model="scope.row.order"
                  :readonly="scope.row.order_status"
                  size="small"
                  @keyup.enter.native="
                    handleInputConfirm(
                      scope.$index,
                      scope.row.order,
                      scope.row.id
                    )
                  "
                  >{{ scope.row.order }}</el-input
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <span
                :class="{
                  one: scope.row.status == 0 || 1,
                  two: scope.row.status == 2,
                  three: scope.row.status == 3,
                  four: scope.row.status == 4,
                  five: scope.row.status == 5,
                }"
                >{{ scope.row.status | status }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="是否签到" width="100">
            <template slot-scope="scope" style="text-align: center">
              <span>{{ scope.row.is_sign | is_sign }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click.prevent="handlePublish(scope.$index, scope.row)"
                v-if="scope.row.status == 1"
                >发布</el-button
              >
              <el-button
                size="mini"
                @click="handleCheck(scope.$index, scope.row)"
                >进入</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="scope.row.status == 0"
                >取消赛事</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="审核" width="180">
            <template slot-scope="scope">
              <template v-if="userType == 5">
                <template v-if="scope.row.is_pass == 1">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="operation(2, scope.row.id)"
                    >通过</el-button
                  >
                  <el-button
                    size="mini"
                    type="warning"
                    @click="operation(3, scope.row.id)"
                    >驳回</el-button
                  >
                </template>
                <div v-else-if="scope.row.is_pass == 2" class="four">已通过</div>
                <div v-else-if="scope.row.is_pass == 3" class="one">已驳回</div>
              </template>
              <template v-if="userType == 2">
                <div v-if="scope.row.is_pass == 1">待审核</div>
                <div v-else-if="scope.row.is_pass == 2" class="four">已通过</div>
                <div v-else-if="scope.row.is_pass == 3" class="one">已驳回</div>
              </template>
            </template>

            <template v-show="false">
              <el-button type="text"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </transition>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="ChangePage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PagesAll"
        style="
          margin-top: 50px;
          margin-bottom: 40px;
          margin-left: 150px;
        "
      ></el-pagination>
    </div>
  </keep-alive>
</template>

<script>
import { mapState } from "vuex";
import debounce from "../../utils/debounce";
export default {
  data() {
    return {
      form: {
        name: "",
        type: "",
      },
      PagesAll: null,
      MatchShowList: [],
      currentPage: 1,
      size: 10,
      currentPage: 1,
      debouncedEnterSubmit: debounce(this.onEnterSubmit, 1000),
    };
  },
  created() {
    this.loading = true;
    this.get_allclub();
  },
  filters: {
    clubRef(val, type) {
      if (!val) return "";
      if (!val.get_ref) return "";
      if (!val.get_club) return "";
      let name =
        type == "ref" ? val.get_ref.get_user.name : val.get_club.get_user.name;
      return name ? name : "";
    },
    status(val) {
      switch (val) {
        //0补全赛事 1编辑、发布、查看（未发布） 2签到、查看（已发布、报名）3编排、查看（比赛准备中）4查看(进行中) 5.结束
        case 0:
          return "未发布";
          break;
        case 1:
          return "未发布";
          break;
        case 2:
          return "已发布";
          break;
        case 3:
          return "比赛准备中";
          break;
        case 4:
          return "比赛进行中";
          break;
        case 5:
          return "比赛已结束";
          break;
      }
    },
    is_sign(val) {
      switch (val) {
        case 0:
          return "未签到";
          break;
        case 1:
          return "已签到";
          break;
      }
    },
  },
  watch: {
    "form.name": function (newValue, oldValue) {
      this.debouncedEnterSubmit();
    },
  },
  computed: {
    ...mapState({
      MatchList: "MatchList",
    }),
    userType() {
      return window.sessionStorage.getItem("user_type");
    },
  },
  methods: {
    operation(status, id) {
      this.open(status, id);
    },
    open(status, id) {
      this.$confirm("请点击确定确认选择", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              "/event/club_com_pass",
              {
                com_id: id,
                is_pass: status,
              },
              {
                headers: {
                  token: window.sessionStorage.getItem("token"),
                },
              }
            )
            .then((res) => {
              if (res.data.code == 2000) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    handleInputConfirm(index, order, id) {
      this.$axios
        .post(
          "/event/match_order",
          {
            id: id,
            order: order,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 2000) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        })
        .catch((error) => {});
    },
    showInput(index, row) {},
    onSearch() {
      this.currentPage = 0;
      this.get_allclub();
    },
    onEnterSubmit() {
      this.currentPage = 0;
      this.get_allclub();
    },
    get_allclub() {
      this.$axios
        .post(
          "/event/com_list",
          {
            name: this.form.name,
            type: this.form.type,
            page: this.currentPage,
            limit: this.size,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          const { code, data, message } = res.data;
          if (code == 200) {
            this.MatchShowList = data.list;
            this.PagesAll = data.count;
          } else {
            this.MatchShowList = [];
            this.PagesAll = 0;
            this.$message({
              type: "error",
              message: message,
            });
          }
          this.loading = false;
        })
        .catch((error) => {});
    },
    ChangePage(page) {
      this.currentPage = parseInt(page);
      this.get_allclub();
    },
    handleSizeChange(page) {
      this.size = parseInt(page);
      this.get_allclub();
    },
    handlePublish(index, row) {
      this.$confirm("确定发布赛事吗？发布后不可更改状态", "发布赛事", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios
            .post(
              "/event/com_release",
              {
                com_id: row.id,
              },
              {
                headers: {
                  token: window.sessionStorage.getItem("token"),
                },
              }
            )
            .then((res) => {
              if (res.data.code == 400) {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "发布成功",
                });
                this.get_allclub();
                this.$store.dispatch("getMatchList");
              }
            });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
    handleSign(index, row) {
      this.$router.push({
        path: "/Index/Match/MatchSignUp",
        query: { MatchId: row.id },
      });
    },
    handleManage(index, row) {
      this.$router.push({
        path: "/index/match/AddMatchDetail",
        query: { MatchId: row.id },
      });
      window.sessionStorage.setItem("AddMatchDetailUploadType", 0); //补全赛事
    },
    handleEdit(index, row) {
      this.$router.push({
        path: "/index/match/AddMatchDetail",
        query: { MatchId: row.id },
      });
      window.sessionStorage.setItem("AddMatchDetailUploadType", 1); //编辑赛事
    },
    handleDelete(index, row) {
      this.$confirm("确定取消赛事吗？发布后不可更改状态", "发布赛事", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios
            .post(
              "/event/del_com",
              {
                com_id: row.id,
              },
              {
                headers: {
                  token: window.sessionStorage.getItem("token"),
                },
              }
            )
            .then((res) => {
              if (res.data.code == 400) {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
                this.$store.dispatch("getMatchList");
              }
            });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
    handleCheck(index, row) {
      if (row.status == 0) {
        window.sessionStorage.setItem("AddMatchDetailUploadType", 0);
        this.$router.push({
          path: "/index/match/AddMatchDetail",
          query: { MatchId: row.id },
        });
      } else {
        window.sessionStorage.setItem("AddMatchDetailUploadType", 1);
        this.$router.push({
          path: "/index/match/MatchDetail",
          query: { MatchId: row.id },
        });
      }
    },
    handleLayout(index, row) {
      this.$axios
        .post(
          "/event/isvalidate",
          {
            com_id: row.id,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 200) {
            if (row.com_type == 0) {
              this.$router.push({
                path: "/index/match/Layout",
                query: { MatchId: row.id },
              });
            }
            if (row.com_type == 1) {
              this.$router.push({
                path: "/index/match/LayoutDraw",
                query: { MatchId: row.id },
              });
            }
          } else {
            if (res.data.code == 201) {
              this.$message({
                type: "warning",
                message: "暂无人签到",
              });
            } else {
              this.$message({
                type: "warning",
                message: "非法访问",
              });
            }
          }
        });
    },
    handleSchedule(index, row) {
      this.$router.push({
        path: "/index/match/schedule",
        query: { MatchId: row.id },
      });
    },
    handleResult(index, row) {
      this.$router.push({
        path: "/Index/Match/scoreall",
        query: { MatchId: row.id },
      });
    },
  },
};
</script>

<style scoped>
.MatchHome{
  padding-bottom: 200px;
}
.form {
  display: flex;
  margin-left: 46px;
  margin-top: 40px;
}
.state {
  width: 200px;
}
.keyword {
  width: 410px;
}
.search {
  width: 123px;
  text-align: right;
}
.MatchTable {
  width: 95%;
  margin-top: 0px;
  margin-left: 50px;
  margin-bottom: 15px;
}
.one {
  color: #f54221;
}
.two {
  color: #ff8200;
}
.three {
  color: #ffbd00;
}
.four {
  color: #579c00;
}
.five {
  color: #128aa1;
}
</style>
